<!--  -->
<template>
  <div class="body">
    <div class="photo">
      <van-image width="100vw" height="260" fit="contain" :src="img">
      </van-image>
    </div>
    <div class="title">
      {{ content }}
    </div>
    <div class="desc">
      <div class="child" v-for="(item, index) in description" :key="index">
        {{ item }}
      </div>
    </div>

    <div class="next" @click="handleNext()">太简单了</div>
  </div>
</template>

<script>
import { Toast } from "vant";
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等)

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {
      tipsId: 1,
      content: "牛蒡子",
      description: [],
      img: "",
    };
  },

  computed: {},

  watch: {},

  methods: {
    async getTips() {
      return await this.$http.get(`/tips/random`);
    },
    handleNext() {
      this.getTips().then((res) => {
        let data = res.data.result;
        this.content = data.content;
        this.tipsId = this.id;
        this.description = [];
        this.description.push(data.description1.substring(0, 12));
        this.description.push(data.description2.substring(0, 12));
        this.description.push(data.description3.substring(0, 12));
        this.description.push(data.description4);
        this.img = data.img;
      });
    },
  },
  mounted() {
    this.handleNext();
  },
};
</script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */
.body {
  position: relative;
  height: 87.4vh;
  padding-top: 15px;
}

.title {
  margin-top: 10px;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
}
.desc {
  margin-top: 20px;
  width: 300px;
  font-size: 16px;
  line-height: 24px;
  margin: 20px auto;
  color: #757575;
  .child {
    text-align: center;
  }
}
.next {
  position: absolute;
  bottom: 130px;
  width: 100vw;
  font-size: 24px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #757575;
  border-radius: 15px;
  background-color: #dcdee08c;
  // box-shadow: 2px 2px 6px 2px;
}
</style>